<script setup lang="ts">
import { ref } from 'vue';
import Login from '@/components/login/index.vue';
import { useUserStore } from '@/store/userStore';
import { buildAssetSource } from '@/utils';
import AuthBar from './components/authBar.vue';
import NoticeBar from './components/noticeBar.vue';
import Swiper from './components/swiper.vue';

const loginRef = ref<InstanceType<typeof Login>>();
const userStore = useUserStore();

function handleLogin(path?: string) {
  loginRef.value?.onOpenLoginModal(path);
}

function handleGoToPage(path: string, needLogin: boolean = true) {
  console.log('>>>needLogin', needLogin);

  if (needLogin && !userStore.checkAuth()) {
    handleLogin(path);
    return;
  }
  uni.navigateTo({
    url: path
  });
}
</script>

<template>
  <view class="app-home h-full">
    <NoticeBar />
    <view class="app-home__banner">
      <Swiper />
      <AuthBar @login="handleLogin" />
    </view>
    <view class="app-home__content">
      <wd-row :gutter="20">
        <wd-col :span="12">
          <view class="menu-card menu-card__registration" @click="handleGoToPage('/pages/registration/index')">
            <view class="menu-card__icon h-90 w-85">
              <image :src="buildAssetSource('guahao.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                当日挂号
              </view>
              <view class="menu-card__desc">
                可挂号时间为当日08:30-16:00
              </view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="12">
          <view class="menu-card menu-card__pay" @click="handleGoToPage('/pages/selfPay/index')">
            <view class="menu-card__icon h-95 w-95">
              <image :src="buildAssetSource('jiaofei.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                自助缴费
              </view>
              <view class="menu-card__desc">
                可使用多种支付方式进行缴费
              </view>
            </view>
          </view>
        </wd-col>
      </wd-row>

      <wd-row :gutter="20" class="mt-22">
        <wd-col :span="12">
          <view class="menu-card menu-card__appointment" @click="handleGoToPage('/pages/appointmentRegistration/index')">
            <view class="menu-card__icon h-88 w-83">
              <image :src="buildAssetSource('yuyue.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                预约挂号
              </view>
              <view class="menu-card__desc">
                可预约半月内的普通号/专家号
              </view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="12">
          <view class="menu-card menu-card__print" @click="handleGoToPage('/pages/printService/index')">
            <view class="menu-card__icon h-89 w-87">
              <image :src="buildAssetSource('daying.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                打印服务
              </view>
              <view class="menu-card__desc">
                可查询所有打印检验结果
              </view>
            </view>
          </view>
        </wd-col>
      </wd-row>

      <wd-row :gutter="20" class="mt-22">
        <wd-col :span="12">
          <view class="menu-card menu-card__exam" @click="handleGoToPage('/pages/examination/index')">
            <view class="menu-card__icon h-81 w-86">
              <image :src="buildAssetSource('jiancha.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                检验/检查
              </view>
              <view class="menu-card__desc">
                可选择检验检查项目/体检套餐
              </view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="12">
          <view class="menu-card menu-card__hospital" @click="handleGoToPage('/pages/hospital/index')">
            <view class="menu-card__icon h-82 w-93">
              <image :src="buildAssetSource('zhuyuan.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                住院服务
              </view>
              <view class="menu-card__desc">
                可查询全部住院信息
              </view>
            </view>
          </view>
        </wd-col>
      </wd-row>

      <wd-row :gutter="20" class="menu-card__footer mt-22">
        <wd-col :span="6">
          <view class="menu-card" @click="handleGoToPage('/pages/patientCheckIn/index')">
            <view class="menu-card__icon">
              <image :src="buildAssetSource('fenzhen.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                分诊报道
              </view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="menu-card" @click="handleGoToPage('/pages/informationQuery/index')">
            <view class="menu-card__icon">
              <image :src="buildAssetSource('xinxi.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                信息查询
              </view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="menu-card" @click="handleGoToPage('/pages/satisfactionSurvey/index')">
            <view class="menu-card__icon">
              <image :src="buildAssetSource('manyidu.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                满意度调查
              </view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="menu-card" @click="handleGoToPage('/pages/healthEducation/index', false)">
            <view class="menu-card__icon">
              <image :src="buildAssetSource('jiankangxuanjiao.png')" />
            </view>
            <view class="menu-card__content">
              <view class="menu-card__name">
                健康宣教
              </view>
            </view>
          </view>
        </wd-col>
      </wd-row>
    </view>

    <Login ref="loginRef" />
  </view>
</template>

<route type="home" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '自助服务系统',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.app-home {
  background-color: var(--bg-color);
  overflow: auto;
  .app-home__banner {
    box-sizing: border-box;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  }

  .app-home__content {
    padding: 34px 24px;
  }

  .menu-card {
    display: flex;
    align-items: center;
    border-radius: 20px;
    background: #e2ecfc;
    backdrop-filter: blur(10px);
    color: #fff;
    height: 234px;
    padding-left: 42px;

    &.menu-card__registration {
      background: linear-gradient(90deg, #f6b758 -3%, #f1ab2a 99%);
    }
    &.menu-card__pay {
      background: linear-gradient(270deg, #0e80ee 0%, #008ddd 100%);
    }
    &.menu-card__appointment {
      background: linear-gradient(270deg, #00aaaa 0%, #14d6d4 100%);
    }
    &.menu-card__print {
      background: linear-gradient(90deg, #7c7dff 3%, #434af3 99%);
    }

    &.menu-card__exam,
    &.menu-card__hospital {
      color: #263451;
      height: 216px;
      .menu-card__desc {
        color: var(--secondary-text-color);
      }
    }

    .menu-card__icon {
      image {
        width: 100%;
        height: 100%;
      }
    }

    .menu-card__content {
      flex: 1;
      margin-left: 28px;
      .menu-card__name {
        font-size: 46px;
        font-weight: bold;
      }
      .menu-card__desc {
        font-size: 22px;
      }
    }
  }

  .menu-card__footer {
    .menu-card {
      height: 216px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;
      .menu-card__name {
        font-size: 32px;
        font-weight: bold;

        color: #263451;
      }
      .menu-card__icon {
        width: 82px;
        height: 76px;
      }
      .menu-card__content {
        flex: none;
        margin-left: 0;
        margin-top: 20px;
      }
    }
  }
}
</style>
